<template>
    <div>
        <h1 class="fz37 cfff tc haed bsb fn header-bg">欢迎来到车辆综合服务平台商家端
        </h1>
        <div class="pr w100 peak">
            <img class="logo pa" src="../assets/img/login/logo.png" alt="">
        </div>
        <main class="w100 bsb" v-loading="loading">
            <div class="inputContent">
                <input class="w100 pl10 pb20 mb40 bsb phoneLogin" ref="tel" v-model="tel" type="text"
                    placeholder="手机号登录">
                <div class="verify mb30">
                    <input class="pl10 verificaCode" type="text" ref="code" v-model="verificaCode" placeholder="请输入验证码"
                        :maxlength="codeLength">
                    <button class="code-btn cfff bsb f25 mr5" :disabled="code.isDisabled"
                        :style="{ backgroundColor: code.bgc }" @click="getCode">{{
                            code.val
                        }}</button>
                </div>
                <router-link :to="{ path: '/register' }" tag="a" class="register fz25">
                    立即注册>
                </router-link>
                <button class="w100 mt50 f25 cfff login" @click="loginIn">登录</button>
            </div>
        </main>
    </div>
</template>

<script>
import { Toast } from 'vant';
import 'vant/lib/toast/style';
import { login } from '../api/index';
export default {
    mounted(){
        localStorage.removeItem('order');
        localStorage.removeItem('ID');
    },
    data() {
        return {
            code: {
                isDisabled: false,
                val: '获取验证码',
                num: 60,
                bgc: '#4c8efe'
            },
            tel: 13800000002,
            verificaCode: '',
            codeLength: 6,
            reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            loading:false
        }
    },
    methods: {
        getCode() {
            this.code.isDisabled = true;
            this.code.bgc = '#808080';
            let codeVal = this.code.val;
            this.code.val = `${codeVal}(${this.code.num})`;
            let time = setInterval(() => {
                if (this.code.num <= 1) {
                    clearInterval(time);
                    this.code.isDisabled = false;
                    this.code.bgc = '#4c8efe';
                    this.code.val = '获取验证码';
                    this.code.num = 60;
                    return;
                }
                this.code.num--;
                this.code.val = `${codeVal}(${this.code.num})`;
            }, 1000)
        },
        loginIn() {
            if (this.tel == '') {
                this.$refs.tel.focus();
                Toast('请填入您的手机号码');
                return;
            } else if (!this.reg_tel.test(this.tel)) {
                this.$refs.tel.focus();
                Toast('您输入的手机号码格式不正确');
                return;
            }
            if (this.verificaCode == '') {
                this.$refs.code.focus();
                Toast('验证码不为空');
                return;
            }
            this.loading = true;
            login({tel:this.tel})
                .then(r => {
                    localStorage.setItem('ID',JSON.stringify(r.data.id));
                    if (r.code == 200) {
                        Toast.success('登陆成功');
                        setTimeout(() => {
                            this.tel = '';
                            this.verificaCode = '';
                            this.loading = false;
                            this.$router.push('/');
                        }, 500)
                        return;
                    }
                    if (r.code == 500) {
                        Toast.fail('用户不存在');
                    } else {
                        Toast.fail('登录失败');
                    }
                })
                .catch(e => {
                    this.loading = false;
                    console.log(e);
                })
        }
    }
}
</script>

<style scoped>
*{
  font-size: 25rem;
}
.header-bg {
    background: url(../assets/img/login/login-bg.png) no-repeat;
    background-size: cover;
    padding-top: 95rem;
}

.peak {
    height: 135rem;
    background-color: #fff;
    margin-top: -60rem;
    border-top-right-radius: 50rem;
    border-top-left-radius: 50rem;
}

.logo {
    width: 370rem;
    height: 250rem;
    top: -170rem;
    left: 25%;
}

main .inputContent {
    padding-left: 95rem;
    padding-right: 95rem;
}

main .phoneLogin,
main .verificaCode {
    outline: none;
    border: none;
    border-bottom: 1rem solid #dedee0;
}

main .verificaCode {
    border: none;
    padding-top: 8rem;
    align-self: center;
}

main .phoneLogin::placeholder,
main .verificaCode::placeholder {
    color: #dedee0;
    font-size: 25rem;
}

main .verify {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rem solid #dedee0;
}

main .verify .code-btn {
    border: none;
    border-radius: 40rem;
    padding: 15rem 30rem;
    margin-bottom: 13rem;
}

main .register {
    color: #4c8efe;
}

main .login {
    border: none;
    border-radius: 40rem;
    padding: 28rem 0 20rem;
    background: linear-gradient(to right, #3687fe, #0762e6);
}
</style>